import { React, useEffect, useRef, useState } from 'react'
import './index.scss'
import * as echarts from "echarts";

export default function Index() {
  const chartRef = useRef(null);
  // 获取本地存储内容
  const wind = JSON.parse(localStorage.getItem('settings')) || {};
  // console.log(wind, '123');
  const [menu, setMenu] = useState(wind.zoomMode);
  //修改颜色
  const [styles, setstyles] = useState(wind.colorData);
  const [colors, setcolors] = useState(wind.colors);

  function Florence(){
    let chartInstance = echarts.init(chartRef.current);
    chartInstance.clear()
    const option = {
      legend: {
        textStyle: {
          color: styles[colors][0],
        },
      },
      grid: {
        top: "100%",
        
        //顶部空闲25% 用于展示标题 和图例，这里就是我们本文要调整的数据。
        containLabel: true,
      },
      // tooltip: {
      //   trigger: 'item',
      //   textStyle: {
      //     show: true,
      //     color: styles[colors][0],
      //   },
      // },
      tooltip: {
        trigger: "item",
   
        backgroundColor: "rgba(0,0,0,0.5)",
        textStyle: {
          color: styles[colors][0] ,//设置文字颜色
          show: true,
        },
      },
      // calculable: true,

      series: [
        {
          name: '视频网站找歌的结果',
          type: 'pie',
          radius: [0, 100],
          center: ['50%', '50%'],
          roseType: 'radius',
          itemStyle: {
            normal: {

              label: {                 //指示到模块的标签文字
                show: true,
                color: styles[colors],
                formatter: '{b} : {c} \n ({d}%)'
              },
              labelLine: {             //指示到模块的标签线
                show: true,

              }
            },
          },
          color:  styles[colors], //颜色将根据饼图的区域个数循环
          data: [
            { value: 2, name: '找到了' },
            { value: 10, name: '该视频已被删除' },
            { value: 18, name: '尤克里里的演奏 ' },
            { value: 30, name: '翻唱' },
            { value: 40, name: '手机拍的现场版' }
          ]
        }
      ]
    };
    chartInstance.setOption(option);
    option && window.addEventListener("resize", function () {
      chartInstance.resize();
    });
  }

  useEffect(() => {
    Florence()
    if (wind.chartRefreshPeriod) {
      const timer = setInterval(() => {
        Florence();
      }, wind.chartRefreshPeriod * 1000)
      return ()=>  clearInterval(timer)
    }
  });
  //三元判断函数
  function Mentime({ menu }) {
    console.log('Mentime', menu);
    switch (menu) {
      case "stretch":
        return (
          <div id='ech' ref={chartRef} style={{ height: '320px', width: '25vw', margin: '0 auto' }}></div>
        );
      case "cover":
        return (
          <div id='ech' ref={chartRef} style={{ height: '380px', width: '100%', margin: '0 auto' }}></div>
        );
      case "contain":
        return (
          <div id='ech' ref={chartRef} style={{ height: '34vh', width: '100%', margin: '0 auto' }}></div>
        );
      default:
        return (
          <div id="ech" ref={chartRef} style={{ width: "25vw", height: "320px", margin: "0 auto" }}></div>
        );
    }
  }

  return (
    <div className='below'>
      <h3>当在网上找某首歌的时候</h3>
      {/* <div id='ech' ref={chartRef} style={{ height: '320px', width: '25vw' }}>
      </div> */}
      <Mentime menu={menu} />
    </div>
  )
}
